<template>
	<view>
		
		<!-- <view class="custom-navbar">
			<view class="left" @click="goBack()"><uni-icons type="left"></uni-icons></view>
			<view class="right">
				<uni-search-bar radius="100" :focus="true" clearButton="auto" cancelButton="none" v-model="searchValue"
					@blur="blur" @focus="focus" @input="input">
				</uni-search-bar>
			</view>
		</view> -->
		<view class="custom-navbar">
			<view class="right">
				<uni-search-bar radius="100" :focus="true" clearButton="auto" cancelButton="none" v-model="searchValue" @confirm="onsearch">
				</uni-search-bar>
				<!-- <uni-search-bar radius="100" v-model="searchValue" clearButton="auto"
					cancelButton="none" @confirm="onsearch">
					<uni-icons slot="searchIcon" color="#333333" size="18" type="search" />
				</uni-search-bar> -->
			</view>
		</view>

		<view v-if="seacrhList.length">
			<view class="seacrhList" v-for="(item, index) in seacrhList" :key="index"
				@click="goTo(`${getLink(item.classify,item.extend)}${item.orignalID}`)">
				<view class="list-con">
					<template v-if="!item.extend">
						<view v-if="item.extend.knowledgeCourseType == '2'">
							<image class="video" v-if="item.image" :src="imgUrl + item.image" mode="widthFix"></image>
							<image class="video" v-else
								src="https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/none.png" mode="widthFix">
							</image>
						</view>
					</template>
					<view v-html="brightenKeyword(item.title,editKeyword)" class="title"></view>
					<template v-if="!item.extend">
						<view class="uni-flex list-info" v-if="item.extend.knowledgeCourseType == '2'">
							<view class="author">
								<image v-if="item.authorImg" :src="imgUrl + item.authorImg" mode="widthFix"></image>
								<image v-else mode="widthFix"
									src="https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/avatar.png"></image>
								<text>{{item.author}}</text>
							</view>
							<view class="see"><uni-icons type="eye" color="#9498A0"
									size="14"></uni-icons><text>{{item.see}}</text>
							</view>
						</view>
					</template>
					<view class="uni-flex list-text-con" v-else>
						<view class="list-text">
							<view class="summary" v-html="brightenKeyword(item.description,editKeyword)">
								{{index.description}}
							</view>
							<view class="uni-flex list-info">
								<view class="author">
									<text>{{item.author}}</text>
								</view>
								<view class="see"><uni-icons type="eye" color="#9498A0"
										size="14"></uni-icons><text>{{item.browseNum}}</text>
								</view>
							</view>
						</view>
						<view class="image-con">
							<image class="image" v-if="item.image" :src="imgUrl + item.image"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-load-more :status="LoadMore" :content-text="contentText"></uni-load-more>
	</view>
</template>

<script>
	import {
		baseurl,
		queryEngineResources
	} from "@/api/user.js"
	let imgUrl = baseurl + "/nb-as/1.0.1/FileService/previewFile?fileId="
	export default {
		data() {
			return {
				searchValue: '',
				keyword: '鱼苗养殖', //搜索的文字
				editKeyword: '鱼苗养殖', //做匹配的文字（这个一定要，不能用‘keyword’变量，不然会有问题）
				classifies: [],
				seacrhList: [], //搜索的结果
				list: [],
				showLoadMore: false,
				imgUrl,
				page: 1,
				maxpage: 0,
				LoadMore: 'nomore',
				contentText: {
					contentdown: '...',
					contentrefresh: '加载中',
					contentnomore: '暂无更多数据'
				}
			};
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			//console.log(option.keyword); //打印出上个页面传递的参数。
			if (option.record) {
				console.log("options", option.record)
				this.LoadMore = 'loading';
				let path = JSON.parse(option.record).join("=")  
				console.log("path",path)
				let cookie = uni.getStorageSync('X-Token')
				let formdata = {
					"sourceType": 0,
					"pageSize": "10",
					"pageNum": "1"
				}
				let baseParams = {
					// 请求接口地址
					url: baseurl + "/nb-app/1.0.1/SearcherService/speakEngineResources",

					// 请求类型
					filePath: path,
					// 请求参数
					name: 'file',
					// 请求头
					header: {
						'Cookie': `X-Token=${cookie}`,
						//'content-type': 'application/x-www-form-urlencoded'
					},
					formData: {
						formData: JSON.stringify(formdata)
					},
				}
				console.log('on stop',baseParams);
				uni.uploadFile({
					...baseParams,
					success: (res) => {						
						let temp = JSON.parse(res.data)
						if (temp.success) {
							console.log("temp",temp)
							this.searchValue = temp.returnObj.keyword
							this.editKeyword = temp.returnObj.keyword
							this.keyword = option.keyword;
							this.seacrhList = temp.returnObj.list
							this.page = temp.returnObj.pageNum
							this.maxpage = temp.returnObj.navigateLastPage
						} else {
							uni.showToast({
								title: JSON.parse(res.msgContent),
								icon: 'none'
							})
							return
						}
					},
					fail: (err) => {
						console.log('err',err)
					},
					complete: () => {
						this.LoadMore = "nomore"
					}
				})
			} else {
				this.editKeyword = option.keyword
				if (option.type) {
					console.log("option",option)
					if(option.type == JSON.stringify(["999"])){
						this.classifies = ""
					}else{
						this.classifies = JSON.parse(option.type)
					}
				}
				this.keyword = option.keyword;
				this.searchValue = option.keyword;
				console.log(this.searchValue)
				this.LoadMore = 'loading';
				this.page = 1
				//console.log("onload", this.arctileObj)
				let options = {
					condition: {
						keyword: this.keyword,
						sourceType: 0,
						classifies: this.classifies
					},
					pageNum: 1,
					pageSize: 10
				}
				this.queryEngineResources(options);
			}
			
		},
		onReachBottom() {
			console.log("onReachBottom");
			console.log("page", this.page, this.maxpage)
			if (this.page >= this.maxpage) {
				this.LoadMore = 'nomore';
				return
			}
			this.LoadMore = 'loading';
			this.page++;
			console.log("keyword",this.keyword,this.searchValue)
			this.queryEngineResources({ //参数
				condition: {
					keyword: this.searchValue,
					sourceType: 0,
					classifies: this.classifies
				},
				pageNum: this.page,
				pageSize: 10
			});
		},
		methods: {
			async queryEngineResources(options) {
				this.LoadMore = 'nomore';
				const res = await queryEngineResources(options);
				if (res.success) {
					this.seacrhList = this.seacrhList.concat(res.returnObj.list)
					this.maxpage = res.returnObj.navigateLastPage
					this.page = res.returnObj.pageNum
				}
			},
			goTo(e) {
				var url = e;
				uni.navigateTo({
					url: url
				})
			},
			goBack() {
				uni.navigateBack()
			},
			onsearch(res) {
				console.log(res,"searchres",this.searchValue)
				if (!this.keyword.trim()) {
					//这里你要给个弹窗或者轻提示'请输入关键词'
					return
				}
				//这个地方要请求接口，我们现在直接用模拟的数据list
				//MINE_API.getHelpSearch({
				//	helpTitle: this.keyword
				//}).then(res => {
				//	this.editKeyword = this.keyword
				//	this.seacrhList = res.data.records
				//})
				this.LoadMore = 'loading';
				this.page = 1;
				this.seacrhList = [];
				this.keyword = this.searchValue
				this.editKeyword = this.keyword
				this.queryEngineResources({ //参数
					condition: {
						keyword: this.searchValue,
						sourceType: 0,
						classifies: this.classifies
					},
					pageNum: this.page,
					pageSize: 10
				});
			},
			brightenKeyword(val, editKeyword) {
				const Reg = new RegExp(editKeyword);
				if (val) {
					const res = val.replace(Reg, `<span style="color: #FF5A5A;">${editKeyword }</span>`);
					return res;
				}
			},
			getLink(type,sort) {
				let link = '';
				if (type == '1') {
					link = '../agricultureLecture/expertDetails/expertDetails?id='
				} else if (type == "2" && sort == '{"knowledgeCourseType":1}') {
					link = '../agricultureLecture/classDetails/classDetails?id='
				} else if (type == "2" && sort == '{"knowledgeCourseType":2}') {
					link = '../agricultureLecture/classDetails/Video?id='
				} else if (type == "3") {
					link = '../productDetails/productDetails?id='
				} else if (type == "4") {
					link = '../agricultureService/serviceDetails/serviceDetails?sort=4&id='
				} else if (type == "5") {
					link = '../agricultureService/serviceDetails/serviceDetails?sort=5&id='
				} else if (type == "6") {
					link = '../loanService/loanDetails/loanDetails?id='
				} else if (type == "7") {
					link = '../subsidyDetails/subsidyDetails?id='
				} else if (type == "8") {
					link = '../newsDetails/newsDetails?id='
				}
				return link
			},
			input(res) {
				console.log('----input:', res)
			},
			clear(res) {

			},
			blur(res) {

			},
			focus(e) {

			},
			cancel(res) {

			}

		}
	}
</script>

<style lang="scss">
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.custom-navbar {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding-left: 30rpx;
		padding-right: 30rpx;
		background-color: #ffffff;

		.right {
			flex: 1;
			position: relative;

			/deep/ .uni-searchbar__box {
				justify-content: left !important;
				flex: 1;
			}
		}
	}

	.list-con {
		width: 100%;
		padding: 30rpx 30rpx;
		margin-top: 8px;
		background-color: #ffffff;
		box-sizing: border-box;
		margin-bottom: 20px;
	}

	.video {
		width: 100%;
	}

	.list-con .title {
		line-height: 26px;
		max-height: 52px;
		font-size: 36rpx;
		font-weight: 500;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.list-text-con {
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: stretch;
		height: 160rpx;
		overflow: hidden;
	}

	.list-text-con .image {
		border-radius: 8px;
		height: 160rpx;
		width: 240rpx;
		//overflow: hidden;
	}

	/* .list-text-con .image image {
		width: 100%;
		border-radius: 8px;
		max-height: 160rpx;
	} */

	.list-text {
		flex-grow: 1;
		line-height: 22px;
		height: 312rpx;
		overflow: hidden;
	}

	.list-text .summary {
		font-size: 28rpx;
		line-height: 22px;
		max-height: 44px;
		height: 44px;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.list-img {
		position: relative;
	}

	.list-img .image {
		width: 100%;
		border-radius: 8px 8px 0px 0px;
	}
</style>